<template>
	<view class="sbody">
		<view v-if="userId != null">
			<!-- 管理人员处理报修 -->
			<view v-if="name === '报修管理'  && userInfo.sysRole.roleId != 109">
				<view class="nav">
					<view class="flex_between">
						<view class="nav_title">
							<view :class="{'active':isActive==1}" @click="chenked(1)">
								未处理
							</view>
						</view>
						<view class="nav_title">
							<view :class="{'active':isActive==2}" @click="chenked(2)">
								处理中
							</view>
						</view>
						<view class="nav_title">
							<view :class="{'active':isActive==3}" @click="chenked(3)">
								已处理
							</view>
						</view>
					</view>
				</view>
				<!-- nav-item -->
				<view v-if="isActive==1" v-for="item,index in serviceRecordList">
					<view class="nav_item" v-if="item.serviceStatus === '0' && item.serverId === null" @click="
						goRecordDetail(item.serviceId)">
						<view class="nav_item_list">
							<text>报修单:</text>
							<text class="nav_item_list_info">{{item.serviceId}}</text>
						</view>
						<view class="nav_item_list">
							<text>报修公司：</text>
							<text class="nav_item_list_info">{{item.compName}}</text>
						</view>
						<view class="nav_item_list">
							<text>服务时间：</text>
							<text class="nav_item_list_info">{{item.serviceTime}}</text>
						</view>
					</view>
				</view>

				<view v-if="isActive==2" v-for="item,index in serviceRecordList">
					<view class="nav_item"
						v-if="item.serviceStatus === '1' || item.serverId != null && item.serviceStatus === '0'"
						@click="goRecordDetail(item.serviceId)">
						<view class="nav_item_list">
							<text>报修单:</text>
							<text class="nav_item_list_info">{{item.serviceId}}</text>
						</view>
						<view class="nav_item_list">
							<text>报修公司：</text>
							<text class="nav_item_list_info">{{item.compName}}</text>
						</view>
						<view class="nav_item_list">
							<text>服务时间：</text>
							<text class="nav_item_list_info">{{item.serviceTime}}</text>
						</view>
					</view>
				</view>

				<view v-if="isActive==3" v-for="item,index in serviceRecordList">
					<view class="nav_item" v-if="item.serviceStatus === '2'" @click="goRecordDetail(item.serviceId)">
						<view class="nav_item_list">
							<text>报修单:</text>
							<text class="nav_item_list_info">{{item.serviceId}}</text>
						</view>
						<view class="nav_item_list">
							<text>报修公司：</text>
							<text class="nav_item_list_info">{{item.compName}}</text>
						</view>
						<view class="nav_item_list">
							<text>服务时间：</text>
							<text class="nav_item_list_info">{{item.serviceTime}}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 维修人员处理报修 -->
			<view v-if="name === '报修管理' && userInfo.sysRole.roleId === 109">
				<view class="nav">
					<view class="flex_between">
						<view class="nav_title">
							<view :class="{'active':isActive==1}" @click="chenked(1)">
								未处理
							</view>
						</view>
						<view class="nav_title">
							<view :class="{'active':isActive==2}" @click="chenked(2)">
								处理中
							</view>
						</view>
						<view class="nav_title">
							<view :class="{'active':isActive==3}" @click="chenked(3)">
								已处理
							</view>
						</view>
					</view>
				</view>
				<!-- nav-item -->
				<view v-if="isActive==1" v-for="item,index in serviceRecordList">
					<view class="nav_item" v-if="item.serviceStatus === '0'" @click="goRecordDetail(item.serviceId)">
						<view class="nav_item_list">
							<text>报修单:</text>
							<text class="nav_item_list_info">{{item.serviceId}}</text>
						</view>
						<view class="nav_item_list">
							<text>报修公司：</text>
							<text class="nav_item_list_info">{{item.compName}}</text>
						</view>
						<view class="nav_item_list">
							<text>服务时间：</text>
							<text class="nav_item_list_info">{{item.serviceTime}}</text>
						</view>
					</view>
				</view>

				<view v-if="isActive==2" v-for="item,index in serviceRecordList">
					<view class="nav_item" v-if="item.serviceStatus === '1'" @click="goRecordDetail(item.serviceId)">
						<view class="nav_item_list">
							<text>报修单:</text>
							<text class="nav_item_list_info">{{item.serviceId}}</text>
						</view>
						<view class="nav_item_list">
							<text>报修公司：</text>
							<text class="nav_item_list_info">{{item.compName}}</text>
						</view>
						<view class="nav_item_list">
							<text>服务时间：</text>
							<text class="nav_item_list_info">{{item.serviceTime}}</text>
						</view>
					</view>
				</view>

				<view v-if="isActive==3" v-for="item,index in serviceRecordList">
					<view class="nav_item" v-if="item.serviceStatus === '2'" @click="goRecordDetail(item.serviceId)">
						<view class="nav_item_list">
							<text>报修单:</text>
							<text class="nav_item_list_info">{{item.serviceId}}</text>
						</view>
						<view class="nav_item_list">
							<text>报修公司：</text>
							<text class="nav_item_list_info">{{item.compName}}</text>
						</view>
						<view class="nav_item_list">
							<text>服务时间：</text>
							<text class="nav_item_list_info">{{item.serviceTime}}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 普通用户查看报修记录 -->
			<view v-if="name === '服务记录' || name === '物业报修'">
				<view class="nav">
					<view class="flex_between">
						<view class="nav_title">
							<view :class="{'active':isActive==1}" @click="chenked(1)">
								待接单
							</view>
						</view>
						<view class="nav_title">
							<view :class="{'active':isActive==2}" @click="chenked(2)">
								已接单
							</view>
						</view>
						<view class="nav_title">
							<view :class="{'active':isActive==3}" @click="chenked(3)">
								已完成
							</view>
						</view>
					</view>
				</view>
				<!-- nav-item -->
				<view v-if="isActive==1" v-for="item,index in serviceRecordList">
					<view class="nav_item" v-if="item.serviceStatus === '0'" @click="goRecordDetail(item.serviceId)">
						<view class="nav_item_list">
							<text>报修单:</text>
							<text class="nav_item_list_info">{{item.serviceId}}</text>
						</view>
						<view class="nav_item_list">
							<text>报修公司：</text>
							<text class="nav_item_list_info">{{item.compName}}</text>
						</view>
						<view class="nav_item_list">
							<text>服务时间：</text>
							<text class="nav_item_list_info">{{item.serviceTime}}</text>
						</view>
					</view>
				</view>

				<view v-if="isActive==2" v-for="item,index in serviceRecordList">
					<view class="nav_item" v-if="item.serviceStatus === '1'" @click="goRecordDetail(item.serviceId)">
						<view class="nav_item_list">
							<text>报修单:</text>
							<text class="nav_item_list_info">{{item.serviceId}}</text>
						</view>
						<view class="nav_item_list">
							<text>报修公司：</text>
							<text class="nav_item_list_info">{{item.compName}}</text>
						</view>
						<view class="nav_item_list">
							<text>服务时间：</text>
							<text class="nav_item_list_info">{{item.serviceTime}}</text>
						</view>
					</view>
				</view>

				<view v-if="isActive==3" v-for="item,index in serviceRecordList">
					<view class="nav_item" v-if="item.serviceStatus === '2'" @click="goRecordDetail(item.serviceId)">
						<view class="nav_item_list">
							<text>报修单:</text>
							<text class="nav_item_list_info">{{item.serviceId}}</text>
						</view>
						<view class="nav_item_list">
							<text>报修公司：</text>
							<text class="nav_item_list_info">{{item.compName}}</text>
						</view>
						<view class="nav_item_list">
							<text>服务时间：</text>
							<text class="nav_item_list_info">{{item.serviceTime}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="authBody_else" v-else>
			<view class="authBody_item">
				<view class="qrCodeNoPermission"></view>
				<view class="qrbottom">
					<view class="qrbottom_prompt">暂无权限,请联系管理员审核!</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		listRecord
	} from '@/common/js/api/serviceRecord.js';

	export default {
		data() {
			return {
				isActive: 1,
				//定义报修记录列表
				serviceRecordList: [],
				//获取登陆用户信息
				userInfo: [],
				roleIds: [],
				//点击报修管理传递的字段
				name: "",
				//用户id
				userId:"",
			}
		},
		onLoad(options) {
			this.name = options.name
			this.userInfo = uni.getStorageSync('userInfo')
			this.userId = this.userInfo.sysUser.userId
			for (let i in this.userInfo.roles) {
				this.roleIds.push(this.userInfo.roles[i].roleId)
			}
			this.getServiceRecord()
		},
		onShow() {
			this.getServiceRecord()
		},
		methods: {
			chenked(type) {
				this.isActive = type
				this.getServiceRecord()
			},
			//获取报修列表
			getServiceRecord() {
				console.log(this.userInfo);
				if (this.name === "报修管理") {
					listRecord().then(res => {
						this.serviceRecordList = res.rows
					})
				} else if (this.name === "服务记录" && this.roleIds.indexOf(109) != -1) {
					let serverPhone = this.userInfo.sysUser.phoneNumber
					let param = {
						'serverPhone': serverPhone
					}
					listRecord(param).then(res => {
						this.serviceRecordList = res.rows
						console.log(this.serviceRecordList);
					})
				} else {
					let userPhone = this.userInfo.sysUser.phoneNumber
					let param = {
						'userPhone': userPhone
					}
					listRecord(param).then(res => {
						this.serviceRecordList = res.rows
					})
				}
			},
			//根据报修编号、用户角色、跳转前的页面跳转不同页面
			goRecordDetail(serviceId) {
				if (this.name === "报修管理") {
					uni.navigateTo({
						url: '../warrantyManageDetail/warrantyManageDetail?serviceId=' + serviceId,
					})
				} else if (this.name === "服务记录" && this.roleIds.indexOf(109) != -1) {
					uni.navigateTo({
						url: '../servicerDetial/servicerDetial?serviceId=' + serviceId,
					})
				} else {
					uni.navigateTo({
						url: '../userRecordDetail/userRecordDetail?serviceId=' + serviceId,
					})
				}

			},
		}
	}
</script>

<style lang="scss" scoped>
	.nav {
		background-color: white;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.flex_between {
		display: flex;
	}

	.nav_title {
		width: 150upx;
		margin-top: 10px;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		font-size: 14px;
		font-family: "PingFang";
		color: #999;
	}

	.active {
		position: relative;
		color: #1884eb;
		font-size: 14px;
		font-weight: bold;
	}

	.active::after {
		content: "";
		position: absolute;
		width: 40rpx;
		border-radius: 10upx;
		height: 8rpx;
		background-color: #0a73d5;
		left: 0px;
		right: 0px;
		bottom: 0px;
		margin: auto;

	}

	.nav_item {
		width: 100%;
		height: 111px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: white;
		margin: auto;
		border-top: 10px rgb(238, 238, 238) solid;
	}

	.nav_item_list {
		width: 90%;
		height: 25%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #999999;
		font-size: 12px;
	}

	.nav_item_list_info {
		color: #000000;
	}

	.qrCodeNoPermission {
		width: 80%;
		padding-bottom: 80%;
		margin: 0 auto;
		background-image: url(http://101.206.123.213:7051/static/image/common/noPermission.png);
		background-repeat: no-repeat;
		background-size: cover;
	}

	.qrbottom {
		text-align: center;
		width: 90%;
		margin: 0 auto;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 24rpx;
	}

	.qrbottom_prompt {
		font-weight: bold;
		font-size: 40rpx;
	}

	.authBody_else {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.authBody_item {
		width: 90%;
		height: 90%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border-radius: 10px;
		background-color: white;
		box-shadow: 0px 5upx 5upx #999999;
	}

	.sbody {
		height: 100vh;
	}
</style>
